<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/knowledge/drugnews -->
	<view class="pagebody">
		<view class="topbox">
			<NavHeader></NavHeader>
		</view>
		<view class="banner">
		</view>
		<view class="conbox">
			<view class="title">
				{{news.name}}
			</view>
			<view class="timebox">
				<span>已帮助: {{news.hits}}人</span>
				<span>{{news.updateTime}} </span>
			</view>
			<consulting></consulting>
			<view class="content" v-html="news.content">
			</view>
			<view class="reference_material">
				参考资料： {{news.referenceMaterial?news.referenceMaterial:ydzsetobj.referenceMaterial}}
			</view>
			<view class="disclaimers">
				<span class="disclaimers_font">免责声明：</span>
				{{news.disclaimers?news.disclaimers:ydzsetobj.disclaimers}}
			</view>
			<view class="flex-row mt40 align-center">
				<view class="mr20" style="flex-shrink: 0;color: #7E8987;font-size: 28rpx;">
					上一篇:
				</view>
				<view class=" lineclamp1 color303b39" style=" font-size: 28rpx;" @click="toNews(upBean.id)">
					{{upBean.name}}
				</view>
			</view>
			<view class="flex-row mt25 align-center">
				<view class="mr20" style="flex-shrink: 0;color: #7E8987;font-size: 28rpx;">
					下一篇:
				</view>
				<view class=" lineclamp1 color303b39" style=" font-size: 28rpx;" @click="toNews(downBean.id)">
					{{downBean.name}}
				</view>
			</view>
		</view>
		

		<!-- 药品卡片（复用） -->
<!-- 		<view class="drugcard flex-row" v-if="drugFlag">
			<image :src="$config.baseUrl+drug.icon" style="flex-shrink:0;width: 184rpx;height: 184rpx;" mode=""></image>
			<view class="ml20">
				<view class="color303b39 fz34 mt20 fwbold lineclamp1" @click="toDrug(drug.id)">
					{{drug.name}}
				</view>
				<view class="mt16 fz28 lineclamp2" style="color: #576260;line-height: 44rpx;"
					v-html="drug.adaptationdisease1">

				</view>
			</view>
		</view> -->
		<Newslistcom :head="1" :newsList="newsList"></Newslistcom>
		<typenews :type="3"  :list="comnewsList"></typenews>
		<AdvCom :type='4'></AdvCom>
		<AboutDrug :drugList="drugList"></AboutDrug>
		<AboutClinical :clinicalList="clinicalList"></AboutClinical>
		<HotnewsCom></HotnewsCom>

		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import AdvCom from '../../layouts/advcome.vue';
	import AboutClinical from '../../components/generalcom/aboutclinical.vue';
	import AboutDrug from '../../components/generalcom/aboutdrug.vue';
	import Newslistcom from '../../components/generalcom/newslistcom.vue';
	import typenews from '../../components/generalcom/typenews.vue';
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';

	import {
		getydzSet,
		getNewsById,
		updateNewsHis,
		getDrugById,
		getDrugList,
		getClinicalList,
		selectNewsList,
		selectNewsByLabel,
		getUpAndDown
	} from '@/api/api.js'
	import {
		getInfo
	} from '@/api/login'
	export default {
		components: {
			FixedFoot,
			NavHeader,
			AboutDrug,
			AboutClinical,
			AdvCom,
			Newslistcom,
			consulting,
			typenews,
			HotnewsCom
		},
		data() {
			return {
				news: {},
				drug: {},
				clinicalList: [],
				drugList: [],
				comnewsList: [],
				newsList: [],
				upAndDownList: [],
				upBean: {},
				downBean: {},
				endid: 0,
				drugFlag: false,
				ydzsetobj: {},
				userDocument: {},
			}
		},
		onLoad(option) {
			this.endid = option.id
			this.getUser()
			this.getNewsById(option.id)
			this.updateNewsHis(option.id);
			this.getset();
		},
		mounted() {
			this.getUpAndDown(this.endid);
		},
		methods: {
			updateNewsHis(id) {
				updateNewsHis(id).then(res => {})
			},
			getset() {
				getydzSet().then(res => {
					this.ydzsetobj = res.data
				})
			},
			getUser() {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					let dis = {
						"diseaseId": this.userDocument.diseaseId
					}
					this.getComNewsList()
					// this.diseaseList.push(dis);
					// this.getDrugList()
					// this.getNewsList()
					// this.otherlist()
					// this.getClinicalList();
			
				})
			},
			getUpAndDown(id) {
				getUpAndDown(id).then(res => {
					console.log("res：", res)
					if (200 == res.code) {
						this.upAndDownList = res.data
						this.upAndDownList.forEach(item => {
							if ("1" == item.type) {
								this.upBean = item
							} else {
								this.downBean = item
							}
						})
						console.log("upBean：", this.upBean)

						console.log("downBean：", this.downBean)
					}
				})
			},
			getNewsById(id) {
				getNewsById(id).then(res => {
					if (200 == res.code) {
						this.news = res.data
						if (null != this.news.drugId) {
							this.drugFlag = true;
							this.getDrug(this.news.drugId);
						}

					}
				})
			},
			//获取药品详情
			getDrug(id) {
				getDrugById(id).then(res => {
					if (200 == res.code) {
						this.drug = res.data
						this.getDrugList();
						this.getClinicalList();
						this.selectNewsList();
					}
				})
			},
			// 药品列表
			getDrugList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.drug.drugDiseaseList.length > 0 ? this.drug.drugDiseaseList : null
				}

				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
						this.total = res.total;
					}
				})
			},
			getComNewsList() {
				let param = {
					"diseaseId": this.userDocument.diseaseId,
				}
				//推荐文章
				selectNewsByLabel(param).then(response => {
					this.comnewsList = response.data
					this.comnewsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})
			
				})
			},
			// 临床招募列表
			getClinicalList() {
				let param = {
					"pageNum": 1,
					"pageSize": 6,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"clinicalDiseaseList": this.drug.drugDiseaseList.length > 0 ? this.drug.drugDiseaseList : null
				}
				getClinicalList(param).then(res => {
					if (res.code == 200) {
						this.clinicalList = res.rows
					}
				})
			},
			selectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugId": this.drug.id
				}
				selectNewsList(param).then(response => {
					this.newsList = response.rows
					this.newsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})

				})
			},
			toDrug(id) {
				uni.navigateTo({
					url: '/pages/knowledge/drugdetail?id=' + id
				})
			},
			toNews(id) {
				uni.navigateTo({
					url: '/pages/knowledge/drugnews?id=' + id,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;

		.topbox {
			padding: 20rpx 24rpx;
			background: #fff;
			border-bottom: 1px solid #dedede;
		}

		.banner {
			height: 388rpx;
			background: url(@/static/images/knowledge/disease/znbanner.png) no-repeat;
			background-size: contain;
		}

		.conbox {
			padding: 36rpx 24rpx;
			border-radius: 48rpx;
			margin-top: -90rpx;
			background: #fff;

			.title {
				font-weight: bold;
				font-size: 42rpx;
				color: #303B39;
				line-height: 64rpx;
			}

			.timebox {
				margin: 24rpx 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7E8987;
				line-height: 24rpx;
			}

			.content {
				margin-top: 40rpx;
				color: #303B39;
				font-size: 36rpx;
				line-height: 72rpx;
				font-weight: 400;

				::v-deep h2 {
					color: #00977C;
					font-size: 38rpx;
					font-weight: 800;
					position: relative;
					padding-left: 12rpx;
					margin-bottom: 24rpx;
					line-height: 72rpx;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 18rpx;
						width: 8rpx;
						height: 38rpx;
						background: #00977C;
						border-radius: 8px 8px 8px 8px;
					}
				}

				::v-deep h3 {
					color: #00977C;
					font-size: 38rpx;
					line-height: 72rpx;
					font-weight: 800;
					margin-bottom: 24rpx;
				}

				::v-deep h4 {
					color: #303B39;
					font-size: 38rpx;
					line-height: 72rpx;
					margin-bottom: 24rpx;
					font-weight: 800;
				}

				::v-deep p {
					color: #303B39;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-bottom: 40rpx;
					font-weight: 400;
				}
			}

			.reference_material {
				font-weight: 400;
				font-size: 28rpx;
				color: #303B39;
				line-height: 56rpx;
				// margin-top: 32rpx;
				word-break: break-all;
			}

			.disclaimers {
				background: #F0F6F5;
				border-radius: 8rpx;
				padding: 16rpx;
				margin-top: 32rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #576260;
				line-height: 56rpx;

				.disclaimers_font {
					color: #00D9B2;
				}
			}
		}

		.clincontent {
			padding: 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			.title {
				padding-bottom: 24rpx;
				border-bottom: 1rpx dashed #DFE2E7;

				.beforelog {
					text-align: center;
					line-height: 48rpx;
					width: 125rpx;
					height: 48rpx;
					background: linear-gradient(90deg, #FFF4E9 0%, #FFEAE9 100%);
					border-radius: 0px 24rpx 24rpx 0px;
					color: #FF5828;
				}

				.titletext {
					color: #303b39;
					line-height: 64rpx;
					text-align: justified;
					text-indent: 150rpx;
				}
			}

			.newscontent {
				color: #293347;
				font-size: 36rpx;
				line-height: 72rpx;
				margin-top: 16rpx;
				margin-bottom: 16rpx;
				text-indent: 36rpx;

				::v-deep h2 {
					color: #00977C;
					font-weight: bold;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 36rpx;
					font-size: 40rpx;
				}

				::v-deep h3 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 20rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep h4 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 18rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep p {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep a {
					font-size: 18rpx;
					color: #003399;
				}
			}


		}

		.drugcard {
			margin-top: 16rpx;
			padding: 24rpx;
			background: #fff;
			border-radius: 32rpx;
		}
	}
</style>